<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算色差</title>
</head>
<script src="./calculateColorDifference.js"></script>
<body>
    <p>
        <label>color1：<input type="text" id="color1"></label>
    </p>
    <p>
        <label>color2：<input type="text" id="color2"></label>
    </p>
    <p>
        结果：<span id="result"></span>
    </p>
    <button onclick="calculate()">计算色差</button>
    <script>
        function calculate(){
            console.log('%c Line:23 🍏 color1.value', 'color:#465975', color1.value);
            console.log('%c Line:23 🥛 color2.value', 'color:#33a5ff', color2.value);
            document.querySelector('#result').innerHTML = calculateColorDifference(color1.value,color2.value)
        }
    </script>
</body>
</html>